<template>
	<!--当前tabbar自己写的--暂时无用-->
	<view class="comp-base-ctabbar-box" v-if="showTabbar">
		<view class="tabbar-items tabbar-topbodder">
			<template v-for="(item, index) in tabbarList">
				<view class="tabbar-item" @click="tabClick(item, index)"
					:class="currentIndex === index ? 'tabbar-active' : ''">
					<view class="tabbar-icons">
						<template v-if="!item.isLarge">
							<view class="tabbar-dot" v-if="item.dot"></view>
							<view class="tabbar-badge" v-else-if="$tools.checkNumber(item.badge, true)">{{ item.badge }}</view>
						</template>
						<view :class="item.isLarge ? 'tabbar-middle' : ''">
							<!--<u-icon :name="item.icon" :color="item.color || '#979797'" :size="item.isLarge ? 46 : 22"></u-icon>-->
							<uni-icons :type="item.icon" :color="item.color || '#979797'" :size="item.isLarge ? 46 : 22"></uni-icons>
						</view> 
					</view>
					<view class="tabbar-title">{{ item.title }}</view>
				</view>
			</template>
			<!--<view class="tabbar-item">
				<view class="tabbar-icons">
					<view class="tabbar-badge" v-if="false">99</view>
					<view class="tabbar-dot"></view>
					<view class="tabbar-middle"><u-icon name="plus-circle-fill" color="#979797" size="46"></u-icon></view>
				</view>
				<view class="tabbar-title">请假</view>
			</view>
			<view class="tabbar-item">
				<view class="tabbar-icons">
					<view class="tabbar-badge" v-if="false">99</view>
					<view class="tabbar-dot"></view>
					<view><u-icon name="account" color="#979797" size="22"></u-icon></view>
				</view>
				<view class="tabbar-title">我的</view>
			</view>-->
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-base-utabbar",
		props: {
			current: { // 当前导航下标
				type: Number,
				default: null
			},
			showTabbar: { // 是否显示导航栏
				type: Boolean,
				default: true
			},
			tabbars: { // 导航栏列表
				type: Array,
				default: (() => {
					return []
				})()
			}
		},
		data() {
			return {
				
			}
		},
		computed: {
			currentIndex: {
				get() {
					let v = this.current
					let val = null
					if (this.$tools.checkNumber(v, true)) {
						val = v
					}
					return val
				},
				set(v) {
					this.$emit('update:current', v)
				}
			},
			tabbarList: {
				get() {
					return this.tabbars
				},
				set(v) {
					this.$emit('update:tabbars', v)
				}
			}
		},
		methods: {
			tabClick(item, index) {
				this.mxRedirectTo(item)
				this.currentIndex = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.comp-base-ctabbar-box {
		/deep/ .tabbar-items {
			position: fixed;
			z-index: 999999;
			width: 100%;
			height: 50px;
			bottom: 0;
			font-size: 13px;
			display: flex;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
			background: $uni-bg-color;
			.tabbar-item {
				flex: 1;
				text-align: center;
				justify-content: space-between;
				.tabbar-icons {
					position: relative;
					margin: 0 auto;
					max-width: 88px;
					height: 22px;
					font-size: 12px;
					color: $c-base-GhostWhite;
					.tabbar-badge {
						position: absolute;
						top: -4px;
						right: 10px;
						display: inline-block;
						width: 18px;
						height: 18px;
						line-height: 18px;
						border-radius: 50px;
						overflow: hidden;
						text-align: center;
						background-color: $uni-color-error;
					}
					.tabbar-dot {
						position: absolute;
						top: 0;
						right: 25px;
						display: inline-block;
						width: 6px;
						height: 6px;
						border-radius: 10px;
						background-color: $uni-color-error;
					}
					.u-icon__icon {
						margin: 0 auto;
						max-width: 28px;
						max-height: 100%;
						overflow: hidden;
					}
					.tabbar-middle {
						position: absolute;
						top: -32px;
						left: calc(50% - 26px);
						width: 52px;
						height: 26px;
						border: 1px solid $c-base-Gainsboro;
						border-bottom: 0;
						border-top-left-radius: 100px;
						border-top-right-radius: 100px;
						background-color: $uni-bg-color;
						.u-icon__icon {
							margin: 3px auto 0;
							max-width: 52px;
							max-height: 100%;
							overflow: hidden;
						}
					}
				}
			}
			.tabbar-item:active {
				background-color: $c-base-GhostWhite;
			}
		}
		.tabbar-topbodder {
			border-top: 1px solid $c-base-Gainsboro;
		}
		/deep/ .tabbar-active {
			color: $uni-color-base;
			.uni-icons {
				color: $uni-color-base !important;
			}
		}
	}
</style>
